<template>
  <div class="common-layout">
    <el-container> 
      <el-main style="border-style: groove; width: 1000px; height: 500px">
        <el-button type="success" @click="open(null)">添加</el-button>
        <!-- 列表 -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="productName" label="商品名称"/>
          <el-table-column prop="productionBatch" label="生产批次"/>
          <el-table-column prop="shelfLife" label="保质期(天)"/>
          <el-table-column prop="licenseNumber" label="生产许可证"/>
          <el-table-column prop="enterprise" label="生产企业"/>
          <el-table-column prop="address" label="操作">
            <template v-slot="scope">
        <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
        <el-button size="small" type="success" @click="open(scope.row)">编辑</el-button>
        <el-button size="small" type="success" @click="open1(scope.row)">详情</el-button>

      </template>
          </el-table-column>

        </el-table>
        <el-pagination
      v-model:current-page="cx.PageIndex"
      v-model:page-size="cx.PageSize"
      :page-sizes="[2,4,6,8]"
     
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="cx.recordCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
      </el-main>
    </el-container>
  </div>
   <!-- 添加弹框 -->
   <el-dialog
          v-model="logic.isopen"
          :title="logic.title"
          width="800"
        >
          <el-form :model="form">
            <el-form-item label="商品名称">
              <el-input v-model="form.productName"/>
            </el-form-item>
            <el-form-item label="生产批次">
              <el-input v-model="form.productionBatch"/>
            </el-form-item>
            <el-form-item label="保质期(天)">
              <el-input v-model="form.shelfLife"/>
            </el-form-item>
            <el-form-item label="生产许可证号">
              <el-input v-model="form.licenseNumber"/>
            </el-form-item>
            <el-form-item label="生产企业">
              <el-input v-model="form.enterprise"/>
            </el-form-item>
            <el-form-item label="封面图">
              <el-upload
    class="avatar-uploader"
    action="http://localhost:48806/api/Account/Upload"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="form.productPhoto" :src="form.productPhoto" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
            </el-form-item>

          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="logic.isipen = false">取消</el-button>
              <el-button type="primary" @click="BaoCun">
                保存
              </el-button>
            </div>
          </template>
        </el-dialog>
</template>

<script lang="ts" setup>
import {ref,reactive,onMounted} from 'vue'
import type { UploadProps } from 'element-plus'
import axios from 'axios';
import { ElMessage,ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
const router=useRouter();


//添加字段
const form = reactive({
  productName:'',
  productionBatch:'',
  shelfLife:'',
  licenseNumber: '',
  enterprise: '',
  productPhoto: '',
});
//查询条件
const cx = reactive({
  PageIndex:1,
  PageSize:5,
  recordCount:1,
  pageCount:1,
});

//逻辑条件
const logic=reactive({
  isopen:false,
  title:'',
})

//保存
const BaoCun = () => {
  // if(form.userName==''){
  //   ElMessage.error('用户名不能为空');
  //   return;
  // }
  // if(form.pwdWord==''){
  //   ElMessage.error('密码不能为空');
  //   return;
  // }
  // if(form.name==''){
  //   ElMessage.error('名称不能为空');
  //   return;
  // }
  // if(form.name=='1'){
  //   ElMessage.error('名称必须是中文');
  //   return;
  // }
  // if(form.bianHao==''){
  //   ElMessage.error('设备编号不能为空');
  //   return;
  // }
  // if(form.weiZhi==''){
  //   ElMessage.error('位置不能为空');
  //   return;
  // }
  // if(form.changJia==''){
  //   ElMessage.error('厂家不能为空');
  //   return;
  // }

  
  if(logic.title=="新增"){
    axios.post('http://localhost:48806/api/Account/AddProduct',form).then(res=>{
    if(res.data.code == 200){
      ElMessage.success("添加成功")
      GetUserInfo();
    }
    else
    {
      ElMessage.error("添加失败")
      
    }
  })
  }
  else{
    axios.post('http://localhost:15752/api/UserInfo/UserInfoUpdate',form).then(res=>{
    if(res.data.code == 500){
      ElMessage.success("修改成功")
      GetUserInfo();
    }
    else
    {
      ElMessage.error("修改失败")
    }
  })
  }

 logic.isopen=false;

};

//列表
const tableData=ref([])
const GetUserInfo = () => {
  axios.get("http://localhost:48806/api/Account/GetProduct",{
    params:{
      PageIndex:cx.PageIndex,
      PageSize:cx.PageSize,
    }
  }).then(res=>{
    console.log(res.data.data.list);
    tableData.value=res.data.data.list;
    cx.recordCount=res.data.data.recordCount
    cx.pageCount=res.data.data.pageCount
  }).catch((err)=>{
     console.log(err)
  })
};


//删除
const del=(row:any)=>{
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post('http://localhost:15752/api/UserInfo/UserInfoDeletd',row).then(res=>{
      console.log(res);
      if(res.data.code==400){
        ElMessage.success(res.data.mssage);
        GetUserInfo();
        // logic.isopen=false;
      }else{
        ElMessage.error(res.data.mssage);
      }
      
    }).catch(err=>{
      console.log(err);
      
    })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const open=(row:any)=>{
  logic.isopen=true
  if(row==null){
    logic.title='新增'
    form.uId=0,
    form.userName='',
    form.pwdWord='',
    form.name=''
    form.bianHao=''
    form.weiZhi=''
    form.changJia=''
    form.jueSeId=''
  }else{
    logic.title='编辑'
    form.uId=row.uId,
    form.userName=row.userName,
    form.pwdWord=row.pwdWord,
    form.name=row.name,
    form.bianHao=row.bianHao,
    form.weiZhi=row.weiZhi,
    form.changJia=row.changJia, 
     form.jueSeId=row.jueSeId
  }
}

//跳转详情页
const open1=(row:any)=>{
  router.push({
     name:'Login'
   })
}


//分页
const handleSizeChange = (val: number) => {
  cx.PageSize=val;
  GetUserInfo();
}
const handleCurrentChange = (val: number) => {
  cx.PageIndex=val;
  GetUserInfo();
}

onMounted(()=>{
  GetUserInfo();
})

//上传图片
const handleAvatarSuccess=(imageUrl:any)=>{
  form.productPhoto=imageUrl;
  console.log(form.productPhoto);
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('上传的图片只能是JPG类型!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('上传的图片不能超过 2MB!')
    return false
  }
  return true
}


</script>